<title>提醒框</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">提醒框</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">提醒框</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Popover Positions start -->
<section id="popover-positions">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Popover Positions</h4>
					<p>Four options are available: top, right, bottom, and left aligned.</p>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Basic Top Popover</h5>
								<p>Add <code>data-toggle="popover"</code> &amp; <code>data-placement="top"</code> to add top popover.</p>
								<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" data-container="body" data-original-title="Popover on top" data-content="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie.">
									Popover on top
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Basic Right Popover</h5>
								<p>Add <code>data-toggle="popover"</code> &amp; <code>data-placement="right"</code> to add right popover.</p>
								<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="right" data-container="body" data-original-title="Popover on right" data-content="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie.">
									Popover on right
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Basic Bottom Popover</h5>
								<p>Add <code>data-toggle="popover"</code> &amp; <code>data-placement="bottom"</code> to add bottom popover.</p>
								<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="bottom" data-container="body" data-original-title="Popover on bottom" data-content="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie.">
									Popover on bottom
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Basic Left Popover</h5>
								<p>Add <code>data-toggle="popover"</code> &amp; <code>data-placement="left"</code> to add left popover.</p>
								<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" data-container="body" data-original-title="Popover on left" data-content="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie.">
									Popover on left
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Popover Positions end -->

<!-- Popover Options start -->
<section id="popover-options">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Popover Options</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Disabled Animaition</h5>
								<p>Use <code>data-animation="false"</code> to remove fade animation. Default is true.</p>
								<button type="button" class="btn btn-primary" data-toggle="popover" data-content="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies." data-original-title="Without Fade Animation" data-animation="false" data-placement="top">
									No animation
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Delay Show/Hide</h5>
								<p>Delay showing and hiding the popover (<code>ms</code>) - does not apply to manual trigger type.</p>
								<button type="button" class="btn btn-primary delay" data-toggle="popover" data-content="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies." data-original-title="Click Triggered" data-delay="500" data-placement="left">
									Delay Popover
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Supports HTML</h5>
								<p>Use <code>data-html="true"</code> for HTML supported trigger.</p>
								<button type="button" class="btn btn-primary" data-toggle="popover" data-content="Tart macaroon marzipan I love soufflé <h6>apple pie</h6> wafer. <b>Chocolate</b> bar jelly caramels jujubes chocolate cake gummies." data-original-title="<b>This</b> is <i>HTML</i> <u>popover</u>" data-html="true" data-placement="bottom">
									HTML Popover
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Popover Template</h5>
								<p>Base HTML to use when creating the popover. The popover's title will be injected into the <code>.popover-inner</code>. <code>.arrow</code> will become the popover's arrow.The outermost wrapper element should have the <code>.popover</code> class.</p>
								<button type="button" class="btn btn-primary template" data-toggle="popover" data-content="<div class='popover' role='popover'><div class='arrow'></div><div class='popover-header'></div><div class='popover-body'></div></div>" data-original-title="Default Template Structure" data-trigger="click" data-placement="left">
									Popover Template
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Popover Options end -->

<!-- Popover Methods start -->
<section id="popover-methods">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Popover Methods</h4>
					<p>This is considered a “manual” triggering of the popover.Popovers whose both title and content are zero-length are never displayed.</p>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Show</h5>
								<p>Reveals an element’s popover. Returns to the caller before the popover has actually been shown.(i.e. before the <code>shown.bs.popover</code> event occurs)</p>
								<button type="button" class="btn btn-info" id="show-method" data-popup="popover" data-placement="top" data-original-title="Show Method Popover" data-content="Fruitcake candy cheesecake jelly beans cake gummies. Cotton candy I love sweet roll jujubes pastry cake halvah cake." data-trigger="manual">
									Show Method <i class="ft-play ml-1"></i>
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Hide</h5>
								<p>Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the <code>hidden.bs.popover</code> event occurs).</p>
								<button type="button" class="btn btn-info" id="hide-method" data-popup="popover" data-placement="left" data-original-title="Hide Method Popover" data-content="Fruitcake candy cheesecake jelly beans cake gummies. Cotton candy I love sweet roll jujubes pastry cake halvah cake." data-trigger="manual">
									Hide Method <i class="ft-play ml-1"></i>
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Toggle</h5>
								<p>Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the <code>shown.bs.popover</code> or <code>hidden.bs.popover</code> event occurs).</p>
								<button type="button" class="btn btn-info" id="toggle-method" data-popup="popover" data-original-title="Toggle Method Popover" data-placement="top" data-content="Fruitcake candy cheesecake jelly beans cake gummies. Cotton candy I love sweet roll jujubes pastry cake halvah cake." data-trigger="manual">
									Toggle Method <i class="ft-play ml-1"></i>
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Dispose</h5>
								<p>Hides and destroys an element’s popover. Popovers that use delegation cannot be individually destroyed on descendant trigger elements.</p>
								<div class="btn-group">
									<button type="button" class="btn btn-info" data-toggle="popover" data-original-title="Dispose Method Popover" data-placement="left" data-content="Fruitcake candy cheesecake jelly beans cake gummies. Cotton candy I love sweet roll jujubes pastry cake halvah cake." data-trigger="click" id="dispose-method">
										Dispose
									</button>
									<button type="button" class="btn btn-info" id="dispose">
										<i class="la la-play-circle"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Popover Methods end -->

<!-- Popover Events start -->
<section id="popover-events">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Popover Events</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Show Event</h5>
								<p>This event fires immediately when the <code>show</code> instance method is called.</p>
								<button type="button" class="btn btn-warning" id="show-popover">
									Show Event Popover
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Shown Event</h5>
								<p>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</p>
								<button type="button" class="btn btn-warning" id="shown-popover">
									Shown Event Popover
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Hide Event</h5>
								<p>This event is fired immediately when the <code>hide</code> instance method has been called.</p>
								<button type="button" class="btn btn-warning" id="hide-popover">
									Hide Event Popover
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Hidden Event</h5>
								<p>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</p>
								<button type="button" class="btn btn-warning" id="hidden-popover">
									Hidden Event Popover
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Popover Events end -->

<!-- Popover Triggers start -->
<section id="popover-triggers">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Popover Triggers</h4>
					<p>Popover is triggered using - click | hover | focus | manual options. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.</p>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Hover</h5>
								<p>Use <code>data-trigger="hover"</code> for hover trigger.</p>
								<button type="button" class="btn btn-primary" data-toggle="popover" data-content="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies." data-trigger="hover" data-original-title="Hover Triggered">
									On Hover Trigger
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Click</h5>
								<p>Use <code>data-trigger="click"</code> for click trigger. This is a default trigger.</p>
								<button type="button" class="btn btn-primary" data-toggle="popover" data-content="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies." data-original-title="Click Triggered" data-trigger="click" data-placement="bottom">
									On Click Trigger
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Focus</h5>
								<p>Use <code>data-trigger="focus"</code> for focus trigger.</p>
								<button type="button" class="btn btn-primary" data-toggle="popover" data-content="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies." data-original-title="Focus Triggered" data-trigger="focus">
									On Focus Trigger
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Manual</h5>
								<p>Use <code>data-trigger="manual"</code> for manual trigger. You can do show/hide using js</p>
								<button type="button" class="btn btn-primary manual" data-toggle="popover" data-placement="left" data-content="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies." data-original-title="Manual Triggered" data-trigger="manual" >
									On Manual Trigger
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Popover Triggers end -->
</div>

<script type="text/javascript">
	lucky.require('popover',lucky.factory('popover'));
</script>